//
//  PickerSheetView.swift
//  GithubUserSet
//
//  Created by Golden Jellyfish on 2025/9/4.
//

import SwiftUI
/*
struct PickerSheetView: View {
    @Binding var selectedValue: String
    let options: [String]
    var onConfirm: (String) -> Void
    var onCancel: () -> Void // 添加一个取消的回调

    var body: some View {
        VStack(spacing: 20) {
            // ... 标题、图标等 ...
            HStack {
                           Spacer()
                           Image(systemName: "checkmark.circle.fill")
                               .font(.largeTitle)
                               .foregroundColor(.blue)
                           Spacer()
                       }
//                       .overlay(alignment: .topTrailing) {
//                           Button(action: onCancel) {
//                               Image(systemName: "xmark")
//                                   .font(.title2)
//                                   .foregroundColor(.gray)
//                           }
//                       }
            HStack {
                Button("Cancel", action: onCancel) // 取消按钮
                Spacer()
                Text("Please select").font(.headline)
                Spacer()
                // 为了对称，放一个隐藏的按钮
                Button("Confirm", action: {}).hidden()
            }
            
            Picker("Select a value", selection: $selectedValue) {
                ForEach(options, id: \.self) { Text($0) }
            }
            .pickerStyle(.wheel)
            .labelsHidden()
            // 在 iOS 14 上，滚轮 Picker 默认高度就是 216pt 左右
            
            Button(action: { onConfirm(selectedValue) }) {
                Text("Confirm").font(.headline).frame(maxWidth: .infinity)
            }
            //.buttonStyle(.borderedProminent)
            //.controlSize(.large)
        }
        .padding()
        .padding(.bottom) // 为底部的 Home Indicator 留出空间
    }
}
 */

/*
struct PickerSheetView: View {
    @Binding var selectedValue: String
    let options: [String]
    var onConfirm: (String) -> Void
    var onCancel: () -> Void

    var body: some View {
        // 使用 ZStack 来实现分层布局
        ZStack(alignment: .topTrailing) {
            
            // --- 底层：主要内容 ---
            VStack(spacing: 20) {
                // 标题
                Text("Please select")
                    .font(.headline)
                    // 给标题顶部留出足够空间，避免和关闭按钮重叠
                    .padding(.top, 30)
                
                // 选择器
                Picker("Select a value", selection: $selectedValue) {
                    ForEach(options, id: \.self) { Text($0) }
                }
                .pickerStyle(.wheel)
                .labelsHidden()
                
                // 确认按钮
                Button(action: { onConfirm(selectedValue) }) {
                    Text("Confirm").font(.headline).frame(maxWidth: .infinity)
                }
                //.buttonStyle(.borderedProminent)
                //.controlSize(.large)
            }
            
            // --- 顶层：关闭按钮 ---
            Button(action: onCancel) {
                Image(systemName: "xmark.circle.fill")
                    .font(.title)
                    .foregroundColor(.gray.opacity(0.5))
            }
            .padding() // 给按钮一些边距，让它离角落别太近
        }
        .padding()
        .padding(.bottom)
    }
}
*/

/*
// PickerSheetView 现在可以变得非常纯粹，只负责内部布局
struct PickerSheetView: View {
    @Binding var selectedValue: String
    let options: [String]
    var onConfirm: (String) -> Void
    var onCancel: () -> Void

    var body: some View {
        ZStack(alignment: .topTrailing) {
            VStack(spacing: 20) {
                Text("Please select").font(.headline)
                
                Picker("Select a value", selection: $selectedValue) {
                    ForEach(options, id: \.self) { Text($0) }
                }
                .pickerStyle(.wheel)
                .labelsHidden()
                
                Button(action: { onConfirm(selectedValue) }) {
                    Text("Confirm").font(.headline).frame(maxWidth: .infinity)
                }
                //.buttonStyle(.borderedProminent).controlSize(.large)
            }
            
            Button(action: onCancel) {
                Image(systemName: "xmark.circle.fill")
                    .font(.title)
                    .foregroundColor(.gray.opacity(0.5))
            }
            .padding([.top, .trailing])
        }
        .padding()
        .padding(.bottom)
    }
}
 */

import SwiftUI

struct PickerSheetView: View {
    @Binding var selectedValue: String
    let options: [String]
    var onConfirm: (String) -> Void
    var onCancel: () -> Void

    var body: some View {
        
        // 使用一个 VStack 负责整体的垂直布局
        VStack(spacing: 0) {
            
            // --- 1. 独立的“标题栏”区域 ---
           
            ZStack {
                // 标题默认居中
                Text("Please select")
                    .font(.headline)
                    // 让标题的 frame 撑满宽度，确保它能真正居中
                    .frame(maxWidth: .infinity, alignment: .center)
                // 使用 HStack + Spacer 将关闭按钮推到最右边
                HStack {
                    Spacer()
                    Button(action: onCancel) {
                        Image(systemName: "xmark")
                            .font(.system(size: 12, weight: .bold))
                            .foregroundColor(.gray)
                            .padding(8)
                            .background(Color.gray.opacity(0.15))
                            .clipShape(Circle())
                    }
                }
               
            }
            
            // --- 2. 选择器 ---
            Picker("Select a value", selection: $selectedValue) {
                ForEach(options, id: \.self) { Text($0) }
            }
            .pickerStyle(.wheel)
            .labelsHidden()
            
            // --- 3. 确认按钮 (样式和间距不变) ---
            Button(action: { onConfirm(selectedValue) }) {
                Text("Confirm")
                    .font(.headline)
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity)
                    .frame(height: 44)
                    .background(Color.blue)
                    .clipShape(Capsule())
            }
            .padding(.horizontal, 38)
        }
        // 给整个视图统一加上内边距
        .padding()
    }
}

#Preview {
    //PickerSheetView()
}
